<template>
  <div class="tabbar">
    <div class="tabbar-item" 
        v-for="(item, index) in list" 
        :key="index" 
        @click="tabbarChange(item.path)"
    >
    <!-- :class="index==2?'tabbar-item1':''" -->
      <div  class="item-name" :class="[current == index?'tabbarActive':'']" v-if="item.text">{{item.text}}</div>
      <!-- ,index==2?'top_t':'' -->
      <img  v-if='current == index' class="item-img" :src="item.icon_a" />
      <img  v-if='current != index' class="item-img" :src="item.icon" />
      <!-- <img class="item-img1"  v-if='index==2' :src="item.icon" /> -->
    </div>
  </div>
</template>

<script>
export default {
  props: {
      current: String
  },
  data() {
      return {
        list: [{
              text: '首页',  
              icon: 'https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/4/2020/09/zt.png',  //未选中图标
              icon_a: 'https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/4/2020/09/zt_c.png',  //选中图片
              path: "home",
          },{
              text: '产业链',
              icon: 'https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/4/2020/09/cyl.png',
              icon_a: 'https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/4/2020/09/cyl_c.png',
              path: "chain",
          },
          // {
          //     // text: '一键发布',
          //     icon: 'https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/4/2020/09/fb.png',
          //     icon_a: 'https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/4/2020/09/fb.png',
          //     path: '/pages/xsFb2/xsFb2', 
          // },
          {
              text: '消息',
              icon: 'https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/4/2020/09/xm.png',
              icon_a: 'https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/4/2020/09/xm_c.png',
              path: "xxList",
          },{
              text: '退出',
              icon: 'https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/4/2020/09/my.png',
              icon_a: 'https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/4/2020/09/my_c.png',
              path: "my",
          },
        ]
      };
  },
  created() {
  
  },
  inject: [ "logout" ],
  watch: {
      
  },
  methods: {
    tabbarChange(page) {
      if(page=='my'){
        this.$dialog.confirm({
          title: '退出',
          message: '是否退出登录',
        })
        .then(() => {
          let mobile = localStorage.mobile
          let password = localStorage.password
          localStorage.clear()
          localStorage.mobile = mobile
          localStorage.password = password
          this.$router.push('login')
          this.logout()
        })
        .catch(() => {
          // on cancel
        });
        return
      }
      this.$router.push(page)
    }
  }
};
</script>

<style lang="scss" scoped>
.tabbarActive{
    color: #FF5100 !important;
}
.tabbar{
    position: fixed;
    bottom: -2px;
    left: 0;
    right: 0;
    width: 100%;
    height: 56px;
    background-color: #f7f7f7;
    box-shadow:  0px 0px 10px 0px rgba(71, 88, 191, 0.12);
    background-size: 100%;
    display: flex;
    justify-content: space-around;
    z-index: 10;
    // align-items: center;
    .tabbar-item{
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        margin-bottom: 5px;
        width: 19.5%;
        .item-img{
            width: 20px;
            height: 20px;
            margin-bottom: 2px;
        }
        .item-img1{
            // position: fixed;
            width: 60px;
            z-index: 999;
            background-color: #f7f7f7;
            padding: 2px;
            border-radius: 31px 31px 0 0;
            position: relative;
            top: -10px;
        }
        .item-img2{
            position: fixed;
            width: 52px;
            height: 52px;
            z-index: 999;
            background-color: #f7f7f7;
            // padding: 6px 6px 0 6px;
            border-radius: 26px 26px 0 0;
        }
        .item-name{
            font-size: 13px;
            color: #A3A3A3;
            position: relative;
            z-index: 1000;
        }
        .top_t{
          position: relative;
          top: -15px;
        }
    }
    .tabbar-item1{
      width: 22%;
      display: flex;
      justify-content: center;
    }
}
</style>